<?php
/**
 * File: manage.php.
 * User: Yan<me@xiaoyan.me>
 * DateTime: 2017-12-23 9:12
 */ ?>
<style>
    .panel-default:hover {
        background-color: #fafafa;
    }
    .panel-default p {
        margin: 0;
    }
    .change-avatar{  position: relative;}
    .change-avatar .avatar-hover{
        display:none;position:absolute;width:120px;height:120px;line-height:120px;border-radius:50%;left:50%;
        top:0;background-color:rgba(0,0,0,0.3);color:#fff;text-align:center;transform:translateX(-50%);cursor:pointer;
    }
    .change-avatar:hover .avatar-hover{display: block;}
</style>
<div class="text-center">
    <div style="text-align:center;margin-bottom:20px;">
        <img src="<?= $user->user_avatar ?>" class="img-thumbnail img-circle" style="width:150px;height:150px;">
        <div style="font-size:20px;line-height:30px;"><?= $user->user_name ?></div>
    </div>

</div>
<div class="user-list row">
    <?php foreach ($user_list as $u): ?>
        <figure class="panel panel-default pull-left" style="margin: 10px;width: 214px">
            <section class="panel-heading clearfix">
                <b class="pull-left" style="    max-width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;"><?= $u['user_name'] ?></b>
                <div class="btn-group pull-right">
                    <a type="button" class="btn dropdown-toggle"
                       style="padding: 0;border: none;background: none;"><span
                                class="text"><?= $role_list[$u['user_role']] ?></span><span
                                class="caret"></span></a>
                    <ul class="dropdown-menu" style="border-radius: 0;">
                        <?php foreach ($role_list as $r => $v): ?>
                            <li><a href="?action=role&uid=<?= $u['uid'] ?>&role=<?= $r ?>"><?= $v ?></a></li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </section>
            <summary class="panel-body text-center">
                <p class="change-avatar" data-change-avatar="?action=avatar&uid=<?= $u['uid'] ?>">
                    <img src="<?= $u['user_avatar'] ?>"
                         class="img-circle" style="width:120px;height:120px;">
                    <span class="avatar-hover">点击更换头像</span>
                </p>
                <p style="margin-top:10px;"><?= $u['sex'] ?>&nbsp;</p>
                <p><?= $u['student_no'] ?>&nbsp;</p>
                <p><?= $u['phone'] ?>&nbsp;</p>
                <p><?= $u['created_at'] ?></p>
            </summary>
        </figure>
    <?php endforeach; ?>
</div>
<nav aria-label="Page navigation">
    <ul class="pagination">
        <?php for ($i = 1; $i <= $total_page; $i++): ?>
            <li class="<?= $i == $page_index ? 'active' : '' ?>"><a href="?page=<?= $i ?>"><?= $i ?></a></li>
        <?php endfor; ?>
    </ul>
</nav>
<div class="modal-wrapper" role="dialog" id="loading">
    <div class="modal-dialog">
        <div class="modal-dialog-content">操作中,请稍候...</div>
        <div class="modal-dialog-foot">
            <a href="javascript:;" data-dismiss="modal" class="modal-dialog-btn modal-dialog-btn_primary">知道了</a>
        </div>
    </div>
</div>
<script>
    $(function () {
        $('.dropdown-toggle').on('click', function () {
            $(this).next('.dropdown-menu').show();
            return false;
        });
        var keys = '',skip = false;
        $(document).on('keyup',function(e){
            if(skip == false){
                keys += e.key;
                keys = keys.substr(-3);
                if(keys == 'add'){
                    skip = true;
                    keys = '';
                    location.href = '?page_view=addView';
                }
                return false;
            }
        })
        var loading = $('#loading'), lf = loading.find('.modal-dialog-foot'),
            lc = loading.find('.modal-dialog-content');
        $('[data-change-avatar]').on('click', function (e) {
            var avatar = prompt('请输入头像路径:');
            if(avatar){
                var img = $(this).find('img'),url = $(this).attr('data-change-avatar');
                $.post(url,{'src':avatar}, function (ret) {
                    if (ret['code'] == 0) {
                        img.attr('src',avatar)
                    }
                }, 'json');
            }
        });
        $('.dropdown-menu').on('click', function (e) {
            if ($(e.target).is('a')) {
                var a = $(e.target);
                loading.modal('show');
                lc.html('操作中,请稍候...');
                lf.hide();

                $.post(a.attr('href'), function (ret) {
                    lf.show();
                    if (ret['code'] == 0) {
                        lc.html('操作成功');
                        loading.modal('hide');
                        a.parents('.btn-group').find('.text').html(a.text());
                        return false;
                    }
                    lc.html(ret['message']);
                }, 'json');
                $('.dropdown-menu').hide();
            }
            return false;
        });
        $(document).on('click', function (e) {
            $('.dropdown-menu').hide();
        });

    });
</script>